
<template>
    <div class="questionDetail">
        <div class="box">
            <div class="tiltle">
                <span>  考试题目</span>
                <span>  时间:2022-04-11</span>
            </div>
            <div class="left">
                <div>试题列表 <span>总分:<span>100分</span></span></div>
                <div v-if="testlist.list1.length>0">
                    <div class="testType"> 选择题 </div>
                    <div class="testList">
                        <div v-for="(item,index) in testlist.list1" class="answer"  :key="item.id"  @click="changeActiveAnswer(1,index)">
                            <div v-if="item.answerState=='answered'" class="answered" >{{index+1}}</div>
                            <div v-else-if="item.answerState=='answering'" class="answering" >{{index+1}}</div>
                            <div v-else class="unanswered">{{index+1}}</div>
                        </div>
                    </div>
                </div>
                <div v-if="testlist.list2.length>0">
                    <div class="testType"> 填空题 </div>
                    <div class="testList">
                        <div v-for="(item,index) in testlist.list2" class="answer"  :key="item.id" @click="changeActiveAnswer(2,index)">
                            <div v-if="item.answerState=='answered'" class="answered" >{{index+1}}</div>
                            <div v-else-if="item.answerState=='answering'" class="answering">{{index+1}}</div>
                            <div v-else class="unanswered" >{{index+1}}</div>
                        </div>
                    </div>
                </div>
                <div v-if="testlist.list3.length>0">
                    <div class="testType"> 简答题 </div>
                    <div class="testList">
                        <div v-for="(item,index) in testlist.list3" class="answer"  :key="item.id" @click="changeActiveAnswer(3,index)">
                            <div v-if="item.answerState=='answered'" class="answered" >{{index+1}}
                            </div>
                            <div v-else-if="item.answerState=='answering'" class="answering" >
                                {{index+1}}
                            </div>
                            <div v-else class="unanswered">
                                {{index+1}}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="testlist.list3.length>0">
                    <div class="testType"> 编程题 </div>
                    <div class="testList">
                        <div v-for="(item,index) in testlist.list4" class="answer"  :key="item.id" @click="changeActiveAnswer(4,index)" >
                            <div v-if="item.answerState=='answered'" class="answered" >{{index+1}}
                            </div>
                            <div v-else-if="item.answerState=='answering'" class="answering" >
                                {{index+1}}
                            </div>
                            <div v-else class="unanswered">
                                {{index+1}}
                            </div>
                        </div>


                    </div>
                </div>
                <div class="handed"> <el-button type="primary">交卷</el-button></div>
            </div>
            <div class="right">
                <div class="subject">
                    <div class="title" v-if="showTittle">{{type}}题目</div>
                    <div class="content">
                        <div class="text">
                            <div class="topic">
                                {{list[current-1].questionName}}
                            </div>
                            <div class="detail" v-html="list[current-1].questionInformation" v-if="list[current-1].publishType==0||list[current-1].publishType==2"></div>
                        </div>
                        <div class="btn">
                            <!--                            <span>题型：{{queType[list[current-1].questionType]}}</span>-->
                            <!--                            <span>类型：{{queCategory[list[current-1].type]}}</span>-->
                            <!--                            <span style="padding-right: 705px">难度：{{queDifficulty[list[current-1].level]}}</span>-->
                            <el-button type="text" @click="downLoadAnswer">下载附件</el-button>
                        </div>
                    </div>
                </div>
                <div class="answer">
                    <div class="title">答案</div>
                    <!--                    判断题目类型-->
                    <div class="content">
                        <div v-if="textType ==1" class="textleft" >
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div v-else class="textleft">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入内容,填空题答案请“，”分开"
                                    v-model="textarea"
                                    maxlength="300"
                                    show-word-limit
                            >
                            </el-input>
                        </div>
                        <!--                        <div class="text" v-html="list[current-1].answerInformation" v-if="list[current-1].publishType==1||list[current-1].publishType==2"></div>-->

                        <div class="btn"><el-button type="text" @click="downLoad" v-if="list[current-1].publishType==1||list[current-1].publishType==2">下载附件</el-button></div>
                    </div>

                </div>
                <div class="page">
                    <div class="btn">
                        <el-button type="primary" @click="previous">上一题</el-button>
                        <!--                        <span style="color: #39A5EF;padding-left: 19px">第{{current}}题</span>-->
                        <!--                        <span style="padding-right: 19px">/共{{total}}题</span>-->
                        <el-button type="primary" @click="next">下一题</el-button>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: 'testResult',
        computed:{
            ...mapState({
                queType:state=>state.dict.dictTree.ea_question_type['obj'],
                queCategory:state=>state.dict.dictTree.ea_question_category['obj'],
                queDifficulty:state=>state.dict.dictTree.ea_question_difficulty['obj'],
            })
        },
        props:{
            type:{
                type: String,
                default:'考试'
            },
            showTittle:{
                type:Boolean,
                default: true
            },
            showBottom:{
                type:[Number,Boolean],
                default:1
            },
            list:Array,
            total:{
                type:Number,
                default:0
            },
            nowPage:Number
        },
        created () {
            console.log(this.type)
            if (this.type==='练习题'){
                this.current =this.showBottom+1
            }
            console.log(this.current)
            console.log("习题页的list",this.list)
            console.log(this.list.length)
            if(this.list.length==0) {
                this.$router.push('/exercises')
            }
        },
        data(){
            return{
                //题目类型 选择，填空，简答，编程
                textType:1,
                options: [{
                    value: 'a',
                    label: 'A'
                }, {
                    value: 'b',
                    label: 'B'
                }, {
                    value: 'c',
                    label: 'C'
                }, {
                    value: 'd',
                    label: 'D'
                }],
                value: '',
                text: '',
                textarea: '',
                current:1,
                queList:[],
                question:{
                    title:'题目题目题目',
                    content:'内容内容内容内容内容内容'
                },
                //  题目
                testlist:{
                    name:'题目标题',
                    list1:[{id:1,titlt:"题目",answer:"答案1",answerState:'answered'},{id:2,titlt:"题目2",answer:"答案2",answerState:'answering'},{id:3,titlt:"题目3",answer:"答案3"},{id:4,titlt:"题目4",answer:"答案4"},{id:5,titlt:"题目5",answer:"答案5"},  {id:6,titlt:"题目6",answer:"答案6"}, {id:7,titlt:"题目7",answer:"答案7"},  {id:8,titlt:"题目8",answer:"答案8"},  {id:9,titlt:"题目9",answer:"答案9"}, {id:10,titlt:"题目10",answer:"答案10"}],
                    list2:[{id:1,titlt:"题目",answer:"答案1"},{id:2,titlt:"题目2",answer:"答案2"},{id:3,titlt:"题目3",answer:"答案3"},{id:4,titlt:"题目4",answer:"答案4"},{id:5,titlt:"题目5",answer:"答案5"},  {id:6,titlt:"题目6",answer:"答案6"}, {id:7,titlt:"题目7",answer:"答案7"},  {id:8,titlt:"题目8",answer:"答案8"},  {id:9,titlt:"题目9",answer:"答案9"}, {id:10,titlt:"题目10",answer:"答案10"}],
                    list3:[{id:1,titlt:"题目",answer:"答案1"},{id:2,titlt:"题目2",answer:"答案2"},{id:3,titlt:"题目3",answer:"答案3"},{id:4,titlt:"题目4",answer:"答案4"},{id:5,titlt:"题目5",answer:"答案5"},  {id:6,titlt:"题目6",answer:"答案6"}, {id:7,titlt:"题目7",answer:"答案7"},  {id:8,titlt:"题目8",answer:"答案8"},  {id:9,titlt:"题目9",answer:"答案9"}, {id:10,titlt:"题目10",answer:"答案10"}],
                    list4:[{id:1,titlt:"题目",answer:"答案1"},{id:2,titlt:"题目2",answer:"答案2"},{id:3,titlt:"题目3",answer:"答案3"},{id:4,titlt:"题目4",answer:"答案4"},{id:5,titlt:"题目5",answer:"答案5"},  {id:6,titlt:"题目6",answer:"答案6"}, {id:7,titlt:"题目7",answer:"答案7"},  {id:8,titlt:"题目8",answer:"答案8"},  {id:9,titlt:"题目9",answer:"答案9"}, {id:10,titlt:"题目10",answer:"答案10"}],

                }
            }
        },
        methods:{
            //  更改选中状态
            changeActiveAnswer(textType,index){
                this.textType = textType
                if(textType ==1){
                    this.testlist.list1 =  this.testlist.list1.map((item=>{
                        return {...item,answerState:item.answerState == 'answering'?'answered':item.answerState}
                    }))
                    this.testlist.list1[index].answerState = 'answering'
                }else if(textType ==2){
                    this.testlist.list2 =  this.testlist.list2.map((item=>{
                        return {...item,answerState:item.answerState == 'answering'?'answered':item.answerState}
                    }))
                    this.testlist.list2[index].answerState = 'answering'
                }else if(textType ==3){
                    this.testlist.list3 =  this.testlist.list3.map((item=>{
                        return {...item,answerState:item.answerState == 'answering'?'answered':item.answerState}
                    }))
                    this.testlist.list3[index].answerState = 'answering'
                }else if(textType ==4){
                    this.testlist.list4 =  this.testlist.list4.map((item=>{
                        return {...item,answerState:item.answerState == 'answering'?'answered':item.answerState}
                    }))
                    this.testlist.list4[index].answerState = 'answering'
                }


            },

            previous(){
                if (this.current===1){
                    this.$message.warning('当前已是第一题')
                }
                else{
                    this.current--
                    console.log('上一题')
                }
            },
            next(){
                if (this.current===this.total){
                    this.$message.warning('当前已是最后一题')
                }
                else{
                    this.current++
                    console.log('下一题')
                }
            },
            downLoad(){
                if(this.list[this.current-1].answerUrls==''||this.list[this.current-1].answerUrls==null||this.list[this.current-1].answerUrls==undefined){
                    this.$message.warning('该试题答案没有附件')
                }
                else{
                    this.$download.name(this.list[this.current-1].answerUrls)
                }
            },
            downLoadAnswer(){
                if(this.list[this.current-1].questionUrls==''||this.list[this.current-1].questionUrls==null||this.list[this.current-1].questionUrls==undefined){
                    this.$message.warning('该试题没有附件')
                }
                else{
                    this.$download.name(this.list[this.current-1].questionUrls)
                }
            }
        },

    }
</script>

<style scoped lang="less">

    .questionDetail{
        .box{
            margin: 17px auto;
            width: 1200px;
            /*height: 741px;*/
            /*background: #FFFFFF;*/
            border-radius: 6px;
            display: flex;
            flex-wrap: wrap;
            >.subject{
                padding-top: 19px;
            }
            .tiltle{
                width: 100%;
                height: 60px;
                line-height: 60px;
                display: flex;
                justify-content: space-between;
                background: white;
                margin-bottom: 20px;
                padding: 0 10px;
            }
            .left{
                width: 350px;
                /*height: 200px;*/
                background: white;
                margin-right: 20px;
                padding: 10px;
                .handed{
                    margin-top: 30px;
                    text-align: center;
                }

                .testType{
                    text-align: left;
                    margin: 10px 6px;
                }
                .testType{
                    margin-top: 30px;
                }
                .testList{
                    display: flex;
                    flex-wrap: wrap;

                    .answer{
                        font-size: 14px;
                        border-radius: 4px;
                        width: 28px;
                        height: 28px;
                        line-height: 30px;
                        margin:  4px 6px;
                        text-align: center;
                        background: rgba(237, 237, 237, 0.99);
                        box-sizing: border-box;

                    }

                    /*    答题状态  考试时：1未作答，2已经作答，3正在作答 */
                    .unanswered{
                        /*color: rgb(57, 165, 239);*/
                        border-color: rgb(57, 165, 239);
                        border-radius: 4px;
                    }
                    .answered{
                        background: rgb(57, 165, 239);
                        color: white;
                        border-radius: 4px;
                    }
                    .answering{
                        color: rgb(57, 165, 239);
                        border: 1px solid rgb(57, 165, 239);
                        width: 28px;
                        height: 28px;
                        border-radius: 4px;
                        /*background: rgba(237, 237, 237, 0.99);*/
                    }


                }
            }
            .right{
                width: 830px;
                .subject{
                    background: white;
                    padding: 10px;
                }
                .answer{
                    min-height: 200px;
                    margin-top: 20px;
                    background: white;
                    padding: 10px;
                }
            }
            .title{
                text-align: left;
                margin-left: 19px;
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
            }
            .content{
                /*margin: 18px auto;*/
                /*width: 1160px;*/
                /*height: 266px;*/
                /*background: #EEF5FB;*/
                padding: 10px;
                min-height: 250px;
                .text{
                    padding: 20px 20px 0 20px;
                    text-align: left;
                    min-height: 250px;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    overflow: auto;
                    .topic{
                        font-size: 18px;
                    }

                }
                .btn{
                    /*margin-top: 10px;*/
                    text-align: left;
                    /*margin-right: 20px;*/
                    /*span{*/
                    /*    font-size: 14px;*/
                    /*    font-family: Microsoft YaHei;*/
                    /*    font-weight: 400;*/
                    /*    color: #999999;*/
                    /*    padding-right: 64px;*/
                    /*}*/
                }
            }
            .page{
                text-align: right;
                margin-right: 24px;
                margin-top: 20px;
                .el-button{

                }
                span{
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }
    .textleft{
        text-align: left;
        min-height: 200px;
    }

</style>
